<template>
  <div>
    <button @click="show = !show">开始演示</button>
    <Transition name="slide-fade">
      <div v-if="show" class="message">你好</div>
    </Transition>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const show = ref(false)  
</script>

<style>
.slide-fade-enter-active, .slide-fade-leave-active {
  transition: all 0.5s ease;
}

.slide-fade-enter-from, .slide-fade-leave-to {
  transform: translateY(-50px);
  opacity: 0;
}

.message {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  background-color: rgb(183, 212, 212);
}
</style>
